<template>


	<view class="soupLayout">
		<!-- https://z-paging.zxlee.cn/api/props/common.html -->
		<z-paging ref="paging" :default-page-size="5" safe-area-inset-bottom v-model="soupData" @query="queryList">

			<!-- https://z-paging.zxlee.cn/api/slot/main.html#%E5%85%A8%E5%B1%8Floading-slot 第一次进入页面会触发，骨架屏 -->
			<template #loading>
				<uni-load-more status="loading"></uni-load-more>
			</template>

			<!-- https://z-paging.zxlee.cn/api/slot/main.html#%E4%B8%BB%E4%BD%93%E5%B8%83%E5%B1%80slot，冻结固定在top -->
			<template #top>
				<view class="headTop">
					<view class="title">我的鸡汤</view>
					<!-- 控制路由权限，不建议使用api方式跳转 -->
					<navigator class="btn" url="/pages_self/soup/edit">+ 熬制鸡汤</navigator>
				</view>
			</template>


			<view class="list" v-for="item in soupData" :key="item._id">
				<soup-item :fatherData="item">

				</soup-item>
			</view>
		</z-paging>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad
	} from "@dcloudio/uni-app"

	const soupData = ref([])
	const paging = ref(null)
	const db = uniCloud.database();

	const getSoupList = async (pageNo = 1, pageSize = 10) => {
		// skip： 跳过多少条数据，从对应那条开始   limit：限制获取多少条数据
		let skip = (pageNo - 1) * pageSize;
		try {
			let {
				result: {
					errCode,
					data
				}
			} = await db.collection("soup-chicken").field(
					"_id,soup_type,content,view_count,like_count,comment_count,collect_count,soup_status,publish_date,from,reject_reason"
				)
				.orderBy(
					"last_modify_date",
					"desc")
				.skip(skip)
				.limit(pageSize).get();
			if (errCode == 0) {
				paging.value.complete(data);
			}
		} catch (err) {
			console.log(err)
			paging.value.complete(false);
		}
	}


	uni.$on("addSoupSucc", (e) => {
		paging.value.reload()
	})

	onLoad(() => {
		console.log("===onload list view")
		// 	paging.value.reload()  组件未加载不能使用此方法
	})

	const queryList = (pageNo, pageSize) => {
		getSoupList(pageNo, pageSize)
	}
</script>

<style scoped lang="scss">
	.soupLayout {
		.headTop {
			display: flex;
			justify-content: center;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 30rpx 10rpx;
			color: #000;

			.title {
				font-size: 40rpx;
				font-weight: bold;
			}


			.btn {
				border: 1px solid #000;
				border-radius: 100rpx;
				padding: 8rpx 15rpx;
			}
		}

		.list {

			padding: 10rpx 30rpx 10rpx; // 上边 | 左边右边 | 下边
		}


	}
</style>